<template>
  <div>
    <el-card class="box-card">
      <template v-slot:header>
        <div class="clearfix">
          <i class="el-icon-search"></i>
          <span style="margin-left:8px;">分类搜索</span>
        </div>

      </template>

      <div class="search-condition">
        <el-input v-model="keyword" placeholder="请输入关键词"></el-input>
        <el-button type="primary" @click="queryKnow">查询</el-button>
        <el-button @click="addSort">添加</el-button>
      </div>
    </el-card>

    <el-table class="table" :data="tableData" :border="true" style="width: 100%" :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }">
      <el-table-column prop="id" label="序号"> </el-table-column>
      <el-table-column prop="sortName" label="分类名称"> </el-table-column>
      <el-table-column prop="sortName" label="分类图片">
        <template #default="scope">
          <el-image class="img" :zoom-rate="1.2" style="width: 100px; height: 100px" fit="cover"
            v-if="scope.row.showImgUrl !== ''" :src="scope.row.showImgUrl" alt="技术图片" :preview-teleported="true"
            :preview-src-list="[scope.row.showImgUrl]" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button type="primary" link size="small" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="primary" link size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination background layout="prev, pager, next" :total="sortTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, onBeforeMount } from 'vue';
// import { getSortList } from '../../api/sort';
import { useRouter } from 'vue-router'
import { deleteTechSortById, getSortLists, tableData, sortTotal } from 'service/sort'

export default {
  setup(props) {
    // ts 声明对象数组
    // let tableData = ref(null) // 应该用reactive
    // let sortTotal = ref(null)

    onBeforeMount(() => {
      getSortLists();
    })

    const keyword = ref(null);

    const queryKnow = () => {
      console.log(keyword.value, "keyword");
    }


    const $router = useRouter();
    const addSort = () => {
      $router.push('/kld/addsort');
    }
    const handleUpdate = (row) => {
      $router.push({ path: '/kld/addsort', query: { id: row.id } });
    }

    const handleDelete = (row) => {
      deleteTechSortById(row.id);
    }


    return { tableData, keyword, queryKnow, sortTotal, addSort, handleUpdate, handleDelete };
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;

  .search-condition {
    display: flex;
  }
}

.el-input {
  width: 340px;
  margin-right: 20px;
}

.page {
  text-align: right;
  margin-top: 20px;
}
</style>